<div>
  <div class="sub-navbar">
    <div class="container">
      <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{ selectedMenu.value }}
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li
            v-for="item in menus"><a href="javascript:;" v-on:click="onSelectedMenu(item.key)">{{item.value}}</a>
          </li>
        </ul>
      </div>
      <button type="button" class="btn btn-default disabled" v-if="newest">最新</button>
      <button type="button" class="btn btn-default" v-else v-on:click="onNewest">最新</button>
      <button type="button" class="btn btn-default disabled" v-if="good">精华</button>
      <button type="button" class="btn btn-default" v-else v-on:click="onGood">精华</button>
    </div>
  </div>
  <div class="container club">
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div class="panel-body club-topic-list">
          <div class="media item" v-for="topic in topics">
            <div class="media-left">
              <a href="#">
                <img class="media-object avatar-48" v-bind:src="topic.author.avatar">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading title"><a href="/zone/<%= zoneKey %>/<%= zoneTemplate %>/topic/{{ topic._id}}/show?appId=<%= appId %>">{{ topic.title }}</a></h4>
              <div class="info">
                <a class="user-name">{{ topic.author.loginname }}</a> •
                <span>
                  <abbr class="timeago"> 最后一次编辑是 {{ topic.update_at_ago}}</abbr>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <%- createPanel %>
      <div class="list-group">
        <a href="#" class="list-group-item disabled">
          帮助
        </a>
        <a href="/static/edit_help/show?appId=<%=appId%>" class="list-group-item" target="_link">如何编辑文章？</a>
        <a href="/wiki?zoneId=58a008bb1b855701004e8e1c&appId=<%=appId%>" class="list-group-item">日语知识库</a>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var appId = $('[name=app-id]').val();
    var zoneId = '<%= zoneId %>';
    var type = '<%= typeof(type) !== "undefined" && type ? type : "newest" %>';
    var pagePrefix = '<%= apiPrefix.page %>';
    var dataPrefix = '<%= apiPrefix.data %>';
    var menusUtil = new MenusUtil(pagePrefix, dataPrefix);
    var topicsUtil = new TopicsUtil(pagePrefix, dataPrefix);
    var vue = new Vue({
      el: '#app',
      data: {
        menus: [{key: 'all', value: '所有分类', selected: true}],
        topics: [],
        currentPage: 1,
        canLoadData: true,
        pages: 1,
        selectedMenu: {key: 'all', value: '所有分类'},
        newest: type === 'newest' ? true : false,
        good: type === 'good' ? true : false
      },
      methods: {
        getMenus: function() {
          menusUtil.getMenus({zoneId: zoneId}, function(err, docs) {
              if (err) {
                vue.errorMsg = err.message;
                return;
              }

              docs.forEach(item => {
                item.selected = false;
                vue.menus.push(item);
              });

              if (vue.menus && vue.menus.length > 0) {
                vue.currentPage = 1;
                vue.getTopics(vue.currentPage, zoneId, vue.menus[0].key);
              }
          });
        },
        getTopics: function(currentPage, zoneId, menuKey = '', submenuKey = '') {
          topicsUtil.getTopics(currentPage, zoneId, menuKey, submenuKey, function(err, topics, authors, pages, currentPage) {
            if (err) {
              vue.errorMsg = err.message;
              return;
            }

            var newTopics = topics;
            var newAuthors = authors;
            moment.locale('zh-cn');
            newTopics.forEach(function(item) {
              item.update_at_ago = moment(item.update_at).fromNow();
              var index = _.findIndex(newAuthors, function(i) {
                return i._id === item.author_id
              })

              if (index >= 0) {
                item.author = newAuthors[index]
              }
            })

            vue.topics = newTopics;
            vue.pages = pages;
            vue.currentPage = currentPage;
          });
        },
        getGoodTopics: function(currentPage, zoneId, menuKey = '', submenuKey = '') {
          topicsUtil.getGoodTopics(currentPage, zoneId, menuKey, submenuKey, function(err, topics, authors, pages, currentPage) {
            if (err) {
              vue.errorMsg = err.message;
              return;
            }

            var newTopics = topics;
            var newAuthors = authors;
            moment.locale('zh-cn');
            newTopics.forEach(function(item) {
              item.update_at_ago = moment(item.update_at).fromNow();
              var index = _.findIndex(newAuthors, function(i) {
                return i._id === item.author_id
              })

              if (index >= 0) {
                item.author = newAuthors[index]
              }
            })

            vue.topics = newTopics;
            vue.pages = pages;
            vue.currentPage = currentPage;
          });
        },
        onSelectedMenu: function(menuKey) {
          vue.menus.forEach(function(item) {
            if(item.key === menuKey) {
              item.selected = true;
              vue.selectedMenu = item;
            } else {
              item.selected = false;
            }
          });

          vue.currentPage = 1;
          vue.getTopics(vue.currentPage, zoneId, vue.selectedMenu.key);
        },
        onNewest: function() {
          console.log('onNewest')
          vue.newest = true;
          vue.good = false;
          vue.currentPage = 1;
          vue.getTopics(vue.currentPage, zoneId, vue.selectedMenu.key);
        },
        onGood: function() {
          console.log('ongood')
          vue.newest = false;
          vue.good = true;
          vue.currentPage = 1;
          vue.getGoodTopics(vue.currentPage, zoneId, vue.selectedMenu.key);
        }
      }
    });

    var scrollButtom = new ScrollButtom();
    scrollButtom.init(function() {
      if (vue.currentPage < vue.pages && vue.canLoadData) {
        vue.canLoadData = false;
        if (vue.good) {
          vue.getGoodTopics(vue.currentPage + 1, zoneId, vue.selectedMenu.key);
        } else {
          vue.getGoodTopics(vue.currentPage + 1, zoneId, vue.selectedMenu.key);
        }
      }
    });

    vue.getMenus();
  });
</script>
